import {
  defineConfig,
  presetUno,
  presetIcons,
  presetAttributify
} from 'unocss';
import transformerDirectives from '@unocss/transformer-directives';
import transformerCompileClass from '@unocss/transformer-compile-class';

export default defineConfig({
  presets: [
    presetUno(), // 默认样式预设
    presetIcons({
      // 开启懒加载
      // collections: {
      //   "fluent-emoji": () =>
      //     import("@iconify-json/fluent-emoji/icons.json").then(i => i.default),
      //   noto: () =>
      //     import("@iconify-json/noto/icons.json").then(i => i.default),
      //   "skill-icons": () =>
      //     import("@iconify-json/skill-icons/icons.json").then(i => i.default),
      //   solar: () =>
      //     import("@iconify-json/solar/icons.json").then(i => i.default),
      //   "svg-spinners": () =>
      //     import("@iconify-json/svg-spinners/icons.json").then(i => i.default)
      // }
    }), // 图标预设
    presetAttributify({
      prefix: 'un-'
      // ignoreAttributes: ["un-text"] // 禁用对该属性的解析
    }) // 属性化
  ],
  transformers: [
    transformerDirectives({
      applyVariable: ['--at-apply', '--uno-apply', '--uno']
    }) as any,
    transformerCompileClass()
  ],
  shortcuts: [
    {
      btn: 'py-2 px-4 font-semibold rounded-lg shadow-md'
    },
    {
      'btn-green': 'text-white bg-green-500 hover:bg-green-700'
    },
    // 动态指令
    [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`]
  ],
  rules: [['flex', { display: 'flex' }]]
});
